/**
 * @Author: easten
 * @Created: 2024-07-26 00:58:06
 * @Description: 设备面板
 * 展示设备信息，不同的设备类型，返回不同的设备面板
 */
import React, { useMemo, ReactElement } from "react";
import { SJCard, WDCard, WSDCard, JZJCard, YGCard } from "./component";
import { ProductCode } from "_common/enum";
import { IotDevice, IotPoint } from "_common/entity";

// 面板映射，：ttodo 后续根据产品继续新增
const cardMap = new Map<ProductCode, ReactElement>();
cardMap.set(ProductCode.SJ, <SJCard />);
cardMap.set(ProductCode.WD, <WDCard />);
cardMap.set(ProductCode.WSD, <WSDCard />);
cardMap.set(ProductCode.JZJ, <JZJCard />);
cardMap.set(ProductCode.YG16, <YGCard />);
export type DeviceCardProps = {
  device?: IotDevice;
  point?: IotPoint;
  onSelect?: (point: IotPoint) => void;
};
const DeviceCard: React.FC<DeviceCardProps> = (props: DeviceCardProps) => {
  const { device, point, onSelect } = props;

  return useMemo(() => {
    let _device: IotDevice | undefined;
    if (!device && !point) return null;
    if (point && point?.device) {
      _device = point?.device;
    } else {
      _device = device;
    }
    if (!_device) return null;
    const card = cardMap.get(_device.group?.groupCode as ProductCode);
    if (!card) return null;
    // 给card 添加属性
    return React.cloneElement(card, { device: _device, point, onSelect });
  }, [point, device]);
};
export default DeviceCard;
